<template>
  <div>
    <div id="back-login" @click="back">
      <img src="../../assets/back.png" height="16" width="20" />
      <span class="back-text">返回我的</span>
    </div>
    <div class="reg-title">修改密码</div>

    <mt-field class="reg-input" label type="password" placeholder="设置新密码(必填)" v-model="password"></mt-field>
    <mt-field class="reg-input" label type="password" placeholder="重新输入密码(必填)" v-model="password2"></mt-field>

    <mt-button class="reg-btn" type="primary" @click="ResetClick">确认修改</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { reset } from "../../api/user";

export default {
  data() {
    return {
      password: "",
      password2: ""
    };
  },
  methods: {
    clear() {
      this.password2 = "";
      this.password = "";
    },
    back() {
      this.clear();
      this.$router.push({ path: "/Personalcenter" });
    },
    // 写一个修改密码函数
    ResetClick() {
      // 写一些输入判断
      if (this.password == "" || this.password2 == "") {
        Toast({
          message: "表单内容不能为空",
          position: "bottom",
          duration: 1000
        });
        return 0;
      } else if (this.password != this.password2) {
        Toast({
          message: "两次输入的密码不一致",
          position: "bottom",
          duration: 1000
        });
        return 0;
      }
      let loginCode = this.$store.getters.userData.loginCode;
      /*向服务端发送数据*/
      this.resetpassword(loginCode, this.password);
      this.clear();
      setTimeout(() => {
        //设置延迟执行
        console.log("返回登录页");
        this.logout();
      }, 2000);
    },
    //发送修改密码的请求
    resetpassword(loginCode, password) {
      reset(loginCode, password)
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            Toast({
              message: "修改成功，2秒后返回登录页",
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(err => {
          Toast({
            message: err.msg,
            position: "middle",
            duration: 1000
          });
        });
    },
    //退出登录
    logout() {
      // this.$router.replace({ path: "/" });
      this.$router.go(0);
      this.$store.commit('user/LOGOUT');
       console.log("yes!退出成功！")
    },
  }
};
</script>
<style >
#back-login {
  text-align: start;
  padding-left: 30px;
  padding-top: 30px;
}
.back-text {
  color: #26a2ff;
  font-size: 40px;
}
.reg-title {
  color: #26a2ff;
  font-size: 60px;
  margin-top: 200px;
  margin-bottom: 50px;
  text-align: center;
}
.reg-input {
  margin-top: 20px;
  width: 80%;
  margin-left: 10%;
  touch-action: none;
}
.reg-btn {
  width: 30%;
  margin-top: 100px;
}
</style>
